<template>
  <!-- <div> -->
<!--    <Col :xs="24" :sm="12" :md="10" :lg="8">-->
<!--      <Row>-->
<!--        <Col :xs="labelXs" :sm="labelSm" :md="labelMd" :lg="labelLg" :style="{textAlign: 'right'}">{{label}}</Col>-->
<!--        <Col :xs="17" :sm="15" :md="15" :lg="16">-->
<!--          <slot />-->
<!--        </Col>-->
<!--      </Row>-->
<!--    </Col>-->
  <Col v-bind="layout" :xs="labelXs" :sm="labelSm" :md="labelMd" :lg="labelLg">
    <FormItem :label="getLabel">
      <slot/>
    </FormItem>
  </Col>
  <!-- </div> -->
</template>

<script>
import { Row, Col } from "view-design";
export default {
  name: "SearchBarItem",
  components: { Row, Col },
  props: {
    label: { type: String, required: true },
    labelXs: { type: Number, required: false, default: 7 },
    labelSm: { type: Number, required: false, default: 8 },
    labelMd: { type: Number, required: false, default: 8 },
    labelLg: { type: Number, required: false, default: 7 },
    layout: {
      type: Object,
      default: () => {
        return {
          // <576px
          xs: 24,
          // ≥576px
          sm: 24,
          // ≥768px
          md: 12,
          // ≥992px
          lg: 8,
          // ≥1200px
          xl: 6,
          // ≥1600px
          xxl: 6
        };
      }
    },
  },
  computed: {
    /** 是否应该展示更多 */
    getLabel: function () {
      return this.label.replace(RegExp("[`~!@#$^&*()=|{}':：;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]", "g"), "");
    }
  },
};
</script>

<style>
</style>
